<template>
  <common-table
    class="house-members"
    ref="table"
    :show-toolbar="false"
    @vue:mounted="() => $refs.table.load()"
    :fetch="getTableDataAsync"
    :fetch-params="apiParams"
    :columns="columns"
  >
    <template #head_img_url="{ scope }">
      <avatar :src="scope.head_img_url" style="width: 100%" />
    </template>
  </common-table>
</template>

<script>
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import Avatar from '@gis/lib/components/img-viewer/index.vue';
import { houseCurrentPeople } from '@gis/lib/api';
import { getEnumText } from '@gis/lib/enums/index.js';

export default {
  name: 'house-members',
  components: { Avatar, CommonTable },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      columns: [
        {
          title: '头像',
          dataIndex: 'head_img_url',
          scopedSlots: { customRender: 'head_img_url' },
          align: 'left',
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          customRender: (v) => getEnumText('gender', v),
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
        },
        {
          title: '人员类型',
          dataIndex: 'relation',
        },
      ],
    };
  },
  computed: {
    apiParams() {
      return { room_id: this.data.room_id };
    },
  },
  methods: {
    async getTableDataAsync(params) {
      if (!params || !params.room_id) return;
      return this.handleTableResult(await houseCurrentPeople(params));
    },
  },
};
</script>

<style scoped lang="less">
.house-members {
  //width: 100%;
  //height: 634px;
  //padding: 0;
  ///deep/ .ant-table {
  //  .ant-table-header,
  //  .ant-table-body {
  //    padding: 20px;
  //  }
  //}
}
</style>
